<template>
  <div class="notice">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="title" class="XHeader"></XHeader>
    </div>
    <scroller
      @on-pullup-loading="getNoticeList"
      lock-x
      ref="scroller"
      :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',}"
      height="-45"
      :use-pullup="true"
      v-model="status"
    >
      <div class="page">
        <div class="notice-content" v-if="noticeList.length">
          <div class="notice-content-item" v-for="(item, index) in noticeList" :key="index" @click="onNoticeDetail(item)">
            <div class="notice-content-item-title">{{item.n_title}}</div>
            <div class="notice-content-item-time">{{item.n_create_at}}</div>
          </div>
        </div>
      </div>
      <load-more
        v-if="!more&&!noticeList.length"
        :show-loading="false"
        :tip="'暂无数据'"
        background-color="#fbf9fe"
      ></load-more>
    </scroller>
  </div>
</template>

<script>
  import notice from '../../../mixin/notice'

  export default {
    name: 'notice',
    mixins: [notice],
    data () {
      return {
        title: '公告列表',
        status: {
          pullupStatus: 'default'
        }
      }
    }
  }
</script>

<style lang="less">
  .notice {
    .notice-content {
      padding: 10px 0;
      font-size: 14px;
      color: #262626;

      .notice-content-item {
        padding: 20px;
        background: #fff;
        margin-bottom: 5px;

        .notice-content-item-title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          position: relative;
          flex: 1;
          letter-spacing: 0.03em;
        }

        .notice-content-item-time {
          flex-shrink: 0;
          text-align: left;
          margin-top: 8px;
          color: rgba(0, 0, 0, 0.5);
          font-size: 12px;
        }
      }
    }
  }
</style>
